<template>
  <section>
    <el-form :model="loginForm" label-width="80px" size="mini" :rules="rules" ref="loginForm" >
      <el-form-item label="账号" prop="loginName">
        <el-input type="email" v-model="loginForm.loginName" auto-complete="off" style="width: 200px" placeholder="请输入账户名" @keydown.native.prevent.enter="submitForm"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="loginForm.loginPwd" auto-complete="off" style="width: 200px" placeholder="请输入密码" @keydown.native.prevent.enter="submitForm"/>
      </el-form-item>
      <el-form-item>
        <el-button class="subBtn" type="primary" @click="submitForm" >登录</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import cookie from 'js-cookie'
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions } = createNamespacedHelpers(process.env.VUE_APP_MODULE_TITLE)
  export default {
    name: "accountLogin",
    data(){
      return{
        modeToken:'d76d962b-edf2-4ab9-9aec-60708b9ac17d',
        loginForm:{
          loginName:'',
          loginPwd:''
        },
        rules: {
          loginName: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ],
        }
      }
    },
    created(){
      let loginName=cookie.get('loginName')
      if(loginName) this.loginForm.loginName=loginName
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      submitForm(){
        if (this.loginForm.loginName === '' || this.loginForm.loginPwd === '') {
          this.$message({
            showClose: true,
            message: '账号或密码不能为空',
            type: 'error'
          })
          return
        } 
        var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/
        if(!myReg.test(myemail)){
          alert('邮箱格式不正确！')
          return
        }
          this.$emit('loginSuccess',{token:this.modeToken})//模拟登陆成功
          // this.accountLogin(this.loginForm)
        
      },
      accountLogin(data){
        let that = this
        this.fetch({
          api:'/auth/authorize/accountLogin',
          data,
          success:res=>{
            console.log('登录成功！')
            cookie.set('loginName',data.loginName)
            this.$message({
              type:'success',message:'登录成功!'
            })
            this.$emit('loginSuccess',res)
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
